<template>
	<view class="container">
		<!-- <view class="barClass" :style="{ height: `${statusBarHeight}px` }"></view> -->
		<view class="search" :style="{ paddingTop:`${statusBarHeight}px` }">
			<view class="search-position" @click="getPosition">
				<image src="../../static/imgs/home/position.png"></image>
				{{address.length>0?address:addressTips}}
			</view>
			<view class="search-input" @click="search">
				<image src="../../static/imgs/home/search.png"></image>
				<input v-model="searchVal" placeholder="请搜索课程" @focus="search" />
			</view>
		</view>
		<swiper circular :indicator-dots="indicatorDots" class="swiper" :autoplay="autoplay" :interval="interval"
			:duration="duration" :style="{height: `${Height} `,marginTop:`${statusBarHeight+50}px`}">
			<swiper-item v-for="(item,index) in bannerList" :key="index" class="swiper-item">
				<image :src="item.img" mode="widthFix" @load="imgHeight" @click="gotrain(item)"></image>
			</swiper-item>
		</swiper>
		<view class="list" style="padding-bottom:16rpx;">
			<image src="../../static/imgs/home/function_04.png" mode="widthFix" class="list-school" @click="goCampus">
			</image>
			<!-- <view class="list-content" style="padding-top: 0;">
				<view class="list-content_left">
					<image src="../../static/imgs/home/function_01.png" @click="goCampus"></image>
				</view>
				<view class="list-content_right">
					<image src="../../static/imgs/home/function_02.png" @click="goFitness"></image>
					<image src="../../static/imgs/home/function_03.png" @click="goBase"></image>
				</view>
			</view> -->

		</view>
		<view class="list">
			<view class="list-title text_black">教学课程<text class="list-text text_opblack">联合北京体育大学体能训练学院编写</text></view>
			<view class="list-flex">
				<image src="../../static/imgs/home/class_01.png" @click="hrefCourse('256')"></image>
				<image src="../../static/imgs/home/class_02.png" @click="hrefCourse('172')"></image>
				<image src="../../static/imgs/home/class_03.png" @click="hrefCourse('241')"></image>
				<image src="../../static/imgs/home/class_04.png" @click="hrefCourse('222')"></image>
			</view>
		</view>
		<view class="list" style="padding-top: 30rpx;">
			<view class="list-title text_black">院校支持</view>
			<scroll-view class="scroll-view_H" scroll-x="true">
				<view v-for="(item,index) in imgList" :key="index" class="row-item" @click="schoolItem(item)">
					<image :src="item.img"></image>
					<view>{{item.title}}</view>
				</view>
			</scroll-view>
		</view>
		<view class="list" v-if="newList.length>0">
			<view class="list-title text_black" @click="moreClick"
				style="display: flex;align-items: center;justify-content: space-between;">
				<view>奥北资讯</view>
				<view class="more text_opblack">
					更多
					<image src="../../static/imgs/mine/right.png"></image>
				</view>
			</view>
			<view class="list-news">
				<newList :list="newList" imgField="img_url" titleField="title" tipsField="tips" @handleClick="newItem">
				</newList>
			</view>
		</view>
		<!-- 权限弹框 -->
		<view class="quanxian" v-if="quanShow">
			<view class="">
				定位权限说明
			</view>
			<view class="">
				使用您的位置，是为了让您能够设置自己的服务位置，拒绝后会无法使用此功能。
			</view>
		</view>
	</view>
</template>

<script>
	import {
		homeMsg,
		getUser
	} from "../../static/js/api/user.js";
	import newList from "../../components/new_list/index.vue";
	import isNavBar from "../../components/ls-nav-bar/ls-nav-bar.vue";
	import Cache from "../../static/js/cache.js";
	export default {
		components: {
			newList,
			isNavBar,
		},
		data() {
			return {
				indicatorDots: false,
				autoplay: true,
				interval: 5000,
				duration: 500,
				searchVal: "",
				bannerList: [],
				imgList: [],
				newList: [],
				statusBarHeight: 0,
				token: '',
				Height: 0,
				windowTop: 0,
				address: '',
				addressTips: '未定位',
				timer: 60,
				intervalFirst: null,
				quanShow: false,
			}
		},
		onShow() {
			this.getNetwork();
			if (this.token != null && this.token.length > 0) {
				this.getUserData()
			}
		},
		onLoad() {
			this.token = Cache.cache.get('token') ? Cache.cache.get('token') : ''
			// console.log(this.token)
			// console.log(uni.getSystemInfoSync().windowTop)
			this.windowTop = uni.getSystemInfoSync().windowTop
			this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
			if (this.token != null && this.token.length > 0) {
				this.getPosition()
				this.getUserData()
			}
		},
		methods: {
			getNetwork() {
				let _this = this
				uni.getNetworkType({
					success: function(res) {
						if (res.networkType == 'none') {
							_this.intervalFirst = setInterval(() => {
								uni.showToast({
									title: '检测到网络权限可能设置为关闭，您可以在“设置”中检查无线数据及蜂窝移动网络',
									icon: 'none'
								})
								_this.getNetwork()
							}, 5000);
						} else {
							_this.getMsg()
							clearInterval(_this.intervalFirst)
						}
					}
				})
			},
			getUserData() {
				getUser().then(res => {
					console.log(191, res)
					let is_bind_school = res.is_bind_school
					Cache.cache.set('is_bind_school', is_bind_school)
					let newToken = Cache.cache.get('token')
					if (res.user.token != newToken) {
						Cache.cache.clear();
						uni.reLaunch({
							url: "/pages/login/index"
						})
					}
				})
			},
			getPosition() {
				this.addressTips = '定位中...'
				let _this = this
				if (this.address.length == 0) {
					let platform = uni.getSystemInfoSync().platform
					if(platform=='android'){
						_this.quanShow = true
						plus.android.requestPermissions(
							['android.permission.ACCESS_FINE_LOCATION'],
							(e) => {
								if (e.deniedAlways.length > 0) { //权限被永久拒绝  
									_this.quanShow = false
								} else if (e.deniedPresent.length > 0) { //权限被临时拒绝  
									_this.quanShow = false
								} else {
									_this.quanShow = false
									_this.getLocation(platform)
								}
							}
						);
					}else{
						_this.getLocation(platform)
					}
					
				}
			},
			getLocation(platform){
				let _this = this
				uni.getLocation({
					type: platform == 'ios' ? 'wgs84' : 'gcj02',
					geocode: true,
					success: function(res) {
						console.log(124, res)
						_this.addressTips = '定位中...'
						_this.address = res.address ? res.address.city : ''
						// console.log(124,_this.address)

					},
					fail: function(res) {
						console.log(127, res)
						_this.addressTips = '未定位'
						// uni.showToast({
						// 	title:"请打开手机定位",
						// 	icon:"none",
						// })
					}
				});
			},
			imgHeight(e) {
				var winWid = uni.getSystemInfoSync().windowWidth; //获取当前屏幕的宽度
				var imgh = e.detail.height; //图片高度
				var imgw = e.detail.width; //图片宽度
				var swiperH = winWid * imgh / imgw +
					"px" //等比设置swiper的高度。 即 屏幕宽度 / swiper高度 = 图片宽度 / 图片高度  ==》swiper高度 = 屏幕宽度 * 图片高度 / 图片宽度
				this.Height = swiperH //设置高度
			},
			//前往登录页面
			gotrain(item) {
				if (this.token != null && this.token.length > 0) {
					// 1不跳转、2外链、3内链
					if (item.link_type == '3') {
						uni.navigateTo({
							url: item.link_url,
						})
					} else if (item.link_type == '2') {
						uni.navigateTo({
							url: "/pages/home/about?url=" + item.link_url
						})
					}

				} else {
					uni.navigateTo({
						url: "/pages/login/index",
					})
				}
			},
			// 获取资讯
			getMsg() {
				homeMsg().then(res => {
					console.log(res)
					this.newList = res.news
					this.imgList = res.videos ? this.sortByKey(res.videos, 'sort') : []
					if (res.news) {
						res.news.forEach(item => {
							item.tips = '作者：' + item.author
						})
					}
					this.bannerList = res.banners
				})
			},
			// 数组排序
			sortByKey(array, key) {
				return array.sort(function(a, b) {
					var x = a[key];
					var y = b[key];
					return x < y ? -1 : x > y ? 1 : 0;
				});
			},
			//成长体能
			goBase() {
				if (this.token != null && this.token.length > 0) {
					uni.navigateTo({
						url: "/pages/home/fitness"
					})
				} else {
					uni.navigateTo({
						url: "/pages/login/index",
					})
				}

			},
			//教培基地
			goFitness() {
				if (this.token != null && this.token.length > 0) {
					uni.navigateTo({
						url: "/pages/home/base"
					})
				} else {
					uni.navigateTo({
						url: "/pages/login/index",
					})
				}
			},
			//前往基础课程
			hrefCourse(typeId) {
				if (this.token != null && this.token.length > 0) {
					uni.navigateTo({
						url: "/pages/basicCourse/index?typeId=" + typeId
					})
				} else {
					uni.navigateTo({
						url: "/pages/login/index",
					})
				}

			},
			// 前往校园体能
			goCampus() {
				if (this.token != null && this.token.length > 0) {
					let is_bind_school = Cache.cache.get('is_bind_school')
					if (is_bind_school == 'false' || is_bind_school == false) {
						uni.navigateTo({
							url: "/pages/campus/index?school=" + is_bind_school
						})
					} else {
						uni.navigateTo({
							url: "/pages/campus/student?school=" + is_bind_school
						})
					}
				} else {
					uni.navigateTo({
						url: "/pages/login/index",
					})
				}
			},
			// 搜索页面
			search() {
				if (this.token != null && this.token.length > 0) {
					uni.navigateTo({
						url: "/pages/home/search"
					})
				} else {
					uni.navigateTo({
						url: "/pages/login/index",
					})
				}
			},
			// 学校支持
			schoolItem(item) {
				console.log(215, item)
				if (this.token != null && this.token.length > 0) {
					uni.navigateTo({
						url: "/pages/home/video?schoolItem=" + JSON.stringify(item)
					})
				} else {
					uni.navigateTo({
						url: "/pages/login/index",
					})
				}
			},
			// 资讯详情
			newItem(item) {
				for (let i = 0; i < item.content.length; i++) {
					if (item.content[i] == '&') {
						item.content = item.content.replace('&', '!')
					}
				}
				console.log(item.content)
				let info = {
					img_url: item.img_url,
					title: item.title,
					content: item.content,
					author: item.author,
					id: item.id,
				}
				uni.navigateTo({
					url: "/pages/campus/listDetails?newInfo=" + JSON.stringify(info)
				})
			},
			moreClick() {
				// 1:咱们的咨询2；政策资讯
				uni.navigateTo({
					url: "/pages/home/moreNews?type=1"
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import url("./index.scss");

	.quanxian {
		background: #fff;
		padding: 24rpx;
		border-radius: 26rpx;
		position: fixed;
		top: 200rpx;
		left: 24rpx;
		right: 24rpx;

		view:first-child {
			font-size: 32rpx;
			color: #000;
			font-weight: bold;
		}

		view:last-child {
			font-size: 28rpx;
			color: #555;
			margin-top: 14rpx;
			line-height: 30rpx;
		}
	}

	.text_black {
		color: $uni-text-color-black !important;
	}

	.text_opblack {
		color: $uni-text-color-opblack !important;
	}

	.list-news /deep/ .list-item-right {
		margin-left: 30rpx !important;
	}

	.list-news /deep/ .list-item-image {
		background-color: #F5F5F5;
	}
</style>